<template>
  <v-container fluid>
    <v-row>
      <v-col cols="auto">
        <span class="text-h6">Prompts</span>
        <p class="text-body-2 text-md-body-1 text-truncate">Craft, version, and collaborate on prompts in this
          workspace.</p>
      </v-col>
      <v-spacer />
      <v-col cols="auto">
        <v-sheet class="d-flex ga-4">
          <v-btn prepend-icon="mdi-plus">WebHook</v-btn>
          <v-btn prepend-icon="mdi-plus">Prompt</v-btn>
        </v-sheet>

      </v-col>
    </v-row>
    <v-row>
      <v-col cols="2">
        <v-select item-value="All Prompts" :items="['All Prompts', 'Private', 'Public']" />
      </v-col>
      <v-col cols="4">
        <v-text-field min-width="256px" placeholder="Search prompt names, type, use cases..." />
      </v-col>
      <v-spacer />
      <v-col cols="auto">
        <v-btn prepend-icon="mdi-plus">Columns</v-btn>
      </v-col>
    </v-row>
    <v-row>
      <v-data-table :items="items" show-select />
    </v-row>
  </v-container>
</template>

<script lang="ts" setup>
const items = [
  {
    "Name": 'African Elephant',
    "Visibility": 'Loxodonta africana',
    "Prompt Type": 'Herbivore',
    "Last Updated": 'Savanna, Forests',
    "Commits": 1,
    "Last Commit": "abcfded5",
    "Tags": ""
  },
]
</script>
